<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
  <link href="//gmpg.org/xfn/11" rel="profile">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="Hugo 0.68.3" />

  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>利用基于Go Lang的Hugo配合nginx来打造属于自己的纯静态博客系统 &middot; 我的博客</title>

  
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/print.css" media="print">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/poole.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/syntax.css">
  <link type="text/css" rel="stylesheet" href="/my_technology_blog/css/hyde.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|PT+Sans:400,400i,700">


  
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144-precomposed.png">
  <link rel="shortcut icon" href="/favicon.png">

  
  
</head>

  <body class="theme-base-0b ">
  <aside class="sidebar">
  <div class="container sidebar-sticky">
    <div class="sidebar-about">
      <a href="/my_technology_blog/"><h1>我的博客</h1></a>
      <p class="lead">
       杨博的博客 
      </p>
    </div>

    <nav>
      <ul class="sidebar-nav">
        <li><a href="/my_technology_blog/">Home</a> </li>
        
      </ul>
    </nav>

    <p>&copy; 2021. All rights reserved. </p>
  </div>
</aside>

    <main class="content container">
    <div class="post">
  <h1>利用基于Go Lang的Hugo配合nginx来打造属于自己的纯静态博客系统</h1>
  <time datetime=2020-04-19T15:33:05&#43;0800 class="post-date">Sun, Apr 19, 2020</time>
  <p>    Go lang无疑是目前的当红炸子鸡，极大地提高了后端编程的效率，同时有着极高的性能。借助Go语言我们 可以用同步的方式写出高并发的服务端软件，同时，Go语言也是云原生第一语言，Docker，Kubernetes等等著名的项目都是使用Go语言实现的。</p>
<p>    Hugo 是基于 Go 语言的静态网站生成器。</p>
<p>    什么是静态网站生成器？顾名思义，就是以最快的速度生成一个高可用的web页面，我们知道Django作为一款非常流行的框架被广泛应用，但是部署起来实在是太麻烦了，各种命令各种配置，动态页面必然要涉及数据库的配置和操作，另外只要涉及数据库操作，你就不得不考虑sql注入等一系列的安全因素。而纯静态页面则没有这个烦恼，如果我们只需要一个简单的站点，一些简单的功能和页面，比如博客，我们只想以极简的方式用markdown语法写下文字或者代码，让服务器访问纯静态页面，这就是静态网站生成器可以提供给我们的好处。</p>
<p>    为啥选择Hugo?</p>
<p>    Hugo是一种go语言编写的静态网站生成器。适用于搭建个人blog、公司主页、help等网站，是一种小型的CMS系统。静态站点的好处就是快速、安全、易于部署，方便管理。</p>
<p>Hugo的优点包含但不限于:<br>
    得益于Go的高性能，性能很快<br>
    世界上最快的静态网站生成工具，5秒生成6000个页面<br>
    文档为Markdown格式,语法超简单<br>
    Hugo 可以做静态文件生成工具，还是高性能web 服务；<br>
    丰富的站点迁移工具，可以将wordpress，Ghost，Jekyll，DokuWiki，Blogger轻松迁移至 Hugo<br>
    超详细的文档<br>
    活跃的社区<br>
    更加自由的内容组织方式<br>
    丰富的主题模板，可以让你的网站更加炫目多彩</p>
<p>    多环境支持：macos ，linux，windows</p>
<p>    首先，可以去go的官网网站下载安装包 <a href="https://golang.org/dl/">https://golang.org/dl/</a> 然后直接双击安装即可，不需要配置环境变量，因为安装过程自动配置，安装完毕后，打开命令行，输入</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">go</span> <span style="color:#a6e22e">version</span>
</code></pre></div><p>    显示主版本号即表示安装成功</p>
<p>    然后，可以进行hugo的在线源码编译安装，打开命令行，输入下面的命令</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">go</span> <span style="color:#a6e22e">get</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">u</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">v</span> <span style="color:#a6e22e">github</span>.<span style="color:#a6e22e">com</span><span style="color:#f92672">/</span><span style="color:#a6e22e">spf13</span><span style="color:#f92672">/</span><span style="color:#a6e22e">hugo</span> <span style="color:#a6e22e">go</span> <span style="color:#a6e22e">build</span> <span style="color:#f92672">-</span><span style="color:#a6e22e">o</span> <span style="color:#a6e22e">hugo</span> <span style="color:#a6e22e">main</span>.<span style="color:#a6e22e">go</span> <span style="color:#a6e22e">mv</span> <span style="color:#a6e22e">hugo</span> <span style="color:#a6e22e">$GOPATH</span><span style="color:#f92672">/</span><span style="color:#a6e22e">bin</span>
</code></pre></div><p>    如果你不想在线编译安装，也可以去hugo的官网 <a href="https://github.com/gohugoio/hugo/releases">https://github.com/gohugoio/hugo/releases</a> 下载稳定版的压缩包，解压之后配置一下环境变量也可以</p>
<p>    装完以后，在命令行内输入</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">hugo</span> <span style="color:#a6e22e">version</span>
</code></pre></div><p>    打印出版本号即表示hugo安装成功</p>
<p>    在命令行中输入命令</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">hugo</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">site</span> <span style="color:#a6e22e">hugo_blog</span>
</code></pre></div><p>    就生成了一个名字为hugo_blog的新站点，可以感受到速度非常快，和vue.js创建新站点的速度比起来简直天差地别</p>
<p>    打开配置文件config.toml，这是hugo的站点的相关配置，可以进行一些个性化的定制，改为下面这样：</p>
<pre><code>    baseURL = &quot;/&quot; 
    languageCode = &quot;en-us&quot;
    title = &quot;我的博客&quot; 
    #指定主题 
    theme = &quot;hyde&quot; 
    
    [params] 
    #博客简介 
    description = &quot;这里是杨博的个人博客&quot; 
    #博客主题颜色 
    themeColor = &quot;theme-base-08&quot;
</code></pre><p>    可以看到我们制定了一个主题hyde，添加了Theme后的站点才有血有肉，丰富多彩。</p>
<p>    更多的主题可以在这个上面下载，都是免费而开源的：<a href="https://themes.gohugo.io/">https://themes.gohugo.io/</a></p>
<p>    进入到站点内的themes目录，输入命令下载hyde主题，hugo有很多漂亮的主题可以选择</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml"><span style="color:#a6e22e">git</span> <span style="color:#a6e22e">clone</span> <span style="color:#a6e22e">https</span><span style="color:#960050;background-color:#1e0010">://</span><span style="color:#a6e22e">github</span>.<span style="color:#a6e22e">com</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">spf13</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">hyde</span>.<span style="color:#a6e22e">git</span>
</code></pre></div><p>    结构和样式有了，我们还没有内容。我们来创建站点的第一篇文章</p>
<p>    输入命令</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">hugo</span> <span style="color:#66d9ef">new</span> <span style="color:#a6e22e">one</span>.<span style="color:#a6e22e">md</span>
</code></pre></div><p>    hugo在content下创建one.md文件，我们编写一些文件内容：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-markdown" data-lang="markdown"><span style="color:#e6db74">`--- date: &#34;2019-05-23&#34; title: &#34;第一篇文章&#34; --- 
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">你好啊 
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">123123123  
</span><span style="color:#e6db74">
</span><span style="color:#e6db74">​`</span>`` print(&#39;hello world&#39;) ````
</code></pre></div><p>然后在命令行中输入</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">hugo</span> <span style="color:#a6e22e">server</span>
</code></pre></div><p>    来热启动项目</p>
<p>    可以看到已经在1313端口起了一个hugo服务</p>
<p>    访问一下</p>
<p>    至此，非常快速而简单博客已经做好了，那么如何部署到线上呢？非常简单输入命令进行打包操作：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">hugo</span> <span style="color:#f92672">--</span><span style="color:#a6e22e">baseUrl</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;/&#34;</span>
</code></pre></div><p>​		以后打包用这个命令</p>
<pre><code>hugo --baseUrl=&quot;/my_technology_blog/&quot;
</code></pre><p>    hugo就会把你的站点生成纯静态页面，然后打包到public文件夹</p>
<p>    将public上传到阿里云服务器的root目录下</p>
<p>    修改nginx配置文件</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-vue" data-lang="vue"><span style="color:#a6e22e">vim</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">etc</span><span style="color:#f92672">/</span><span style="color:#a6e22e">nginx</span><span style="color:#f92672">/</span><span style="color:#a6e22e">conf</span>.<span style="color:#a6e22e">d</span><span style="color:#f92672">/</span><span style="color:#66d9ef">default</span>.<span style="color:#a6e22e">conf</span>
</code></pre></div><p>    监听80端口，并且项目目录指定/root/public</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml"><span style="color:#a6e22e">server</span> <span style="color:#960050;background-color:#1e0010">{</span>   
	<span style="color:#a6e22e">listen</span>       <span style="color:#ae81ff">80</span><span style="color:#960050;background-color:#1e0010">;</span>   
    <span style="color:#a6e22e">server_name</span>  <span style="color:#a6e22e">localhost</span><span style="color:#960050;background-color:#1e0010">;</span>    
    <span style="color:#a6e22e">access_log</span>      <span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">root</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">md_vue_access</span>.<span style="color:#a6e22e">log</span><span style="color:#960050;background-color:#1e0010">;</span>    
    <span style="color:#a6e22e">error_log</span>       <span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">root</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">md_vue_error</span>.<span style="color:#a6e22e">log</span><span style="color:#960050;background-color:#1e0010">;</span>     
    <span style="color:#a6e22e">client_max_body_size</span> <span style="color:#ae81ff">75</span><span style="color:#a6e22e">M</span><span style="color:#960050;background-color:#1e0010">;</span>     
    <span style="color:#a6e22e">location</span> <span style="color:#960050;background-color:#1e0010">/</span> <span style="color:#960050;background-color:#1e0010">{</span>         
    	<span style="color:#a6e22e">root</span> <span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">root</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">public</span><span style="color:#960050;background-color:#1e0010">;</span>       
        <span style="color:#a6e22e">index</span> <span style="color:#a6e22e">index</span>.<span style="color:#a6e22e">html</span><span style="color:#960050;background-color:#1e0010">;</span>     
    <span style="color:#960050;background-color:#1e0010">}</span>        
    <span style="color:#a6e22e">error_log</span>    
    <span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">root</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">md_vue</span><span style="color:#960050;background-color:#1e0010">/</span><span style="color:#a6e22e">error</span>.<span style="color:#a6e22e">log</span>    <span style="color:#a6e22e">error</span><span style="color:#960050;background-color:#1e0010">;</span> 
<span style="color:#960050;background-color:#1e0010">}</span>
</code></pre></div><p>    重启nginx systemctl restart nginx.service 然后访问一下</p>
<p>    得益于hugo的快速而高效，三分钟之内你就拥有了一个纯静态的个人博客</p>

</div>


    </main>

    
  </body>
</html>
